<script lang="ts" setup>
import { useAdminPayStore } from "../store/adminPay"

const { common, aliPay } = useAdminPayStore()
</script>

<template>
  <t-row v-show="common.showType === '2'" style="width: 100%;">
    <t-col :lg="5" :md="6" :sm="12" :xl="5" :xs="12">
      <t-space class="left_space" direction="vertical">
        <t-form :data="aliPay.formData" label-align="right" label-width="70px">
          <t-form-item label="AppID">
            <t-input v-model="aliPay.formData.appid" placeholder="请输入appid" />
          </t-form-item>

          <t-form-item label="平台公钥">
            <t-textarea v-model="aliPay.formData.public_key" placeholder="请输入平台公钥" :autosize="{ minRows: 2, maxRows: 3 }"/>
          </t-form-item>

          <t-form-item label="应用私钥">
            <t-textarea v-model="aliPay.formData.private_key" :autosize="{ minRows: 2, maxRows: 3 }"
                        placeholder="请输入应用秘钥" />
          </t-form-item>

          <t-form-item label="是否开启">
            <t-switch v-model="aliPay.formData.status" :customValue="[1,0]" />
          </t-form-item>
        </t-form>
      </t-space>
    </t-col>
    <t-col :lg="7" :md="6" :sm="12" :xl="7" :xs="12" class="right">
      <img alt="" class="img" src="@/assets/images/pay_set.svg" />
    </t-col>
  </t-row>

</template>

<style lang="less" scoped>
.left_space {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 50%;
  }
}
</style>
